<template>
    <div class="main">
        <!-- 顶部导航（组件复用） -->
        <my-top-nav></my-top-nav>

        <!-- 中部内容 -->
        <div class="center_context" style="height: calc(100vh - 70px)">

            <!--地图：哈哈，精彩内容开始辽……-->
            <div class="map-display" id="mapDiv">
            </div>

            <!--坐标与比例尺-->
            <div class="coordinateAndscaleBar">
                <!--地图比例尺-->
                <div id="scaleBarDiv" class="map-scalebar" V-show="scaleshow">
                    <div id="scaleBar"></div>
                </div>
                <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
                <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
            </div>

            <!-- 地图左上角按钮栏 -->
            <div id="myToolBtns" class="mytool-btns">
                <!-- 按钮组 -->
                <div id="buttonDiv" style="float: left;">
                    <!-- 按钮1：图层管理 -->
                    <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible', 'layerFlag')" title="图层"
                        id="layerBtn">
                        <img src="../assets/images/map_icons/layer.png" />
                        <img v-show="layerFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <!-- 按钮2：工具2案例 -->
                    <div class="navbtn-items" v-if=tool2Show @click="togglePanel('tool2PanelVisible', 'tool2Flag')"
                        title="工具2" id="layerBtn">
                        <img src="../assets/images/map_icons/layer.png">
                        <img v-show="tool2Flag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>

                    <!--按钮3：地图整饰控制按钮-->
                    <div class="navbtn-items" v-if=decorateshow @click="togglepanel('decoratepanelvisible','decorateFlag')" title="地图整饰控制" id="decorateBtn">
                        <img src="../assets/images/map_icons/Decorate.png">
                        <img v-show="decorateFlag" src="../assets/images/map_icons/selectpoint.png" cass="item-selected">
                    </div>

                    <!--“整饰”下拉-->
                    <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratepanelvisible}" data-toolpanel-title="Decorate">
                        <div class="map-tool-item"  id="coordinateDisplay" title="坐标" @click="coordinateshow=!coordinateshow">
                            <img src="../assets/images/map_icons/Coordinate.png">
                            <span>坐标</span>
                        </div>
                        <div class="map-tool-item" id="scaleDisplay" title="比例尺" @click="scaleshShow=!scaleShow">
                            <img src="../assets/images/map_icons/Scale.png">
                        <span>比例尺</span>
                        </div>
                    </div>

                </div> <!-- buttonDiv结束 -->
            </div> <!-- myToolBtns结束 -->



            <!--图层控制面板-->
            <div id="layerControl" class="layerControl" :class="{ 'layer-hide': lyrpanelVisible }">
                <div class="title"><label>图层列表</label></div>
                <ul id="layerTree" class="layerTree"></ul>
            </div>

        </div> <!-- 中部内容结束 -->
    </div> <!-- 最外层Div结束 -->
</template>

<script>

import TopNav from '../components/TopNav.vue';

import 'ol/ol.css';
import { Map, View } from 'ol';
import { defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition } from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import { XYZ,Vector } from 'ol/source';
import { Title,Vector as lVector } from 'ol/layer';

export default {
    name: 'MyMapTemplate-Map2',
    components: {
        MyTopNav: TopNav
    },
    props: {
        /*mapCtrlTools:{
            type:Array,
            default:function () {
                return []
            }
        },
        lyrdata: {
            type: Array,
            default: []
        },
        mapParams: {
            type: Object,
            default: {}
        },*/
    },
    data() {
        return {
            /**功能组按钮控制**/
            layerShow: true, //图层按钮的控制-功能启动图标按钮，默认false不显示
            //tool2Show: true, //“工具2”按钮的控制-功能启动图标按钮，默认false不显示

            /**地图各悬浮面板的可视状态**/
            lyrPanelVisible: true,  //默认true为隐藏
            //tool2PanelVisible:false, //默认true为隐藏

            /*选中显示红色小标志*/
            layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
            //tool2Flag: false, //“工具2”选中显示红色小标志，默认false为隐藏

            /**功能组按钮控制**/
            decorateShow:true,//鹰眼-功能启动图标按钮，默认false不显示

            /**地图各悬浮面板的可视状态**/
            cooedinateShow:true,//2D坐标，默认false不显示
            scaleShow:true,//显示比例尺，默认false不显示
            decoratePanelVisible:true,//默认true为隐藏

            /*选中红色小标志*/
            decorateFlag:false,//鹰眼选中显示红色小标志，默认false为隐藏
            
        }
    },
    methods: {
        //切换面板功能函数
        togglePanel(attr, attr2) {
            this[attr] = !this[attr];
            this[attr2] = !this[attr2];
        },

        //地图初始化方法
        InitMap() {

            //初始化地图容器
            let map = new Map({
                target: 'mapDiv',
                view: new View({
                    center: [109.43, 33.48],
                    zoom: 7,
                    projection: 'EPSG:4326',
                }),
            });

            //初始化地图文档图层对象
            let mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'Ceshi1', {
                ip: `jlu3s.com`,
                port: `35017`,
            })
            //将地图文档图层加载到地图中
            map.addLayer(mapDocLayer);

            let myVecLayer1 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGISLocalPlus/2023开发大赛/sfcls/玄奘西行途径城市"], {
                ip: "jlu3s.com",
                port: "35017",
                title: "玄奘西行途经城市—矢量图层",
                visible: true,
            })
            //别忘了把地图文档图层加载到地图中
            map.addLayer(myVecLayer1)

            /**图层管理面板 (代码块开始)**/

            /**
            *加载图层列表数据
            *@param {ol.Map} map 地图对象
            *@param {string} id 图层列表容器ID
            */
            function loadLayersControl(map, id) {
                //图层目录容器
                var treeContent = document. getElementById(id);
                //获取地图中所有图层
                var layers = map. getLayers();

                for (var i = 0; i < layers. getLength() ; i++){
                    let t = layers. array_[i]. get('title');
                    let tv = layers. array_[i]. getVisible();

                    //新增li元素，用来承载图层项
                    var elementLi = document. createElement('li');
                    // 添加子节点
                    treeContent. appendChild(elementLi);
                    //创建复选框元素
                    var elementInput = document. createElement('input');
                    elementInput. type = "checkbox";
                    elementInput. name = "layers";
                    elementLi. appendChild(elementInput);
                    //创建label元素
                    var elementLable = document.createElement('label');
                    elementLable.className = "layer";
                    //设置图层名称
                    setInnerText(elementLable, t);
                    elementLi.appendchild(elementLable);
                    //设置图层默认显示状态
                    if (tv) {
                        elementInput.checked = true;
                    }
                    //为checkbox添加变更事件
                    addChangeEvent(elementInput, layers.array_[i]);
                }
            }
            /**
            * 为checkbox元素绑定变更事件
            * @param {input} element checkbox元素
            * @param {ol.layer.Layer} layer 图层对象
            */
            function addChangeEvent(element, layer) {
                element.onclick = function () {
                    if (element.checked) {
                        //显示图层
                        layer.setVisible(true);
                    }
                    else {
                        //不显示图层
                        layer.setVisible(false);
                    }
                };
            }
            /**
            *动态设置元素文本内容(兼容)
            */
            function setInnerText(element, text) {
                if (typeof element.textContent == "string") {
                    element.textContent = text;
                } else {
                    element.innerText = text;
                }
            }
            //别忘了调用函数(传入参数)
            loadLayersControl(map, "layerTree");

            /**图层管理面板 (代码块结束) **/

        },
        F2() {

        },
        F3() {

        },
        F4() {

        },
        F5() {

        },

    },
    created() {

    },
    mounted() {
        // 页面各元素挂载就绪后执行
        this.InitMap();
    },
    watch: {

    },
    computed: {

    }
}
</script>

<style scoped>
/* 地图容器基本样式 */
.map-display {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: darkgray;
}

/*地图工具栏相关样式  */
.mytool-btns {
    position: relative;
    /*left: 10px;*/
    margin-left: 2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width: 450px;
    /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
}

.navbtn-items {
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
}

.navBtnDiv {
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
}

.navbtn-btn {
    margin-right: 10px;
}

.navbtn-items:hover {
    cursor: pointer;
}

.navbtn-items>img {
    width: 36px;
    height: 36px;
    padding: 5px;
}

.item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
}

.layer-hide {
    display: none;
}

    /*工具栏-(量测-整饰-控制-查询等) 下拉框*/
    /*工具栏-(量测-整饰-控制-查询) 下拉框-子项*/
    .map-tool-item{
        width: 85px;
        height: 29px;
        border-bottom: 1px solid #b4b4b4;
        cursor: pointer;
    }

    .map-tool-item>img{
        display: block;
        float: left;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        margin-left: 5px;
    }

    .map-tool-item>span{
        display: block;
        float: left;
        width: 50px;
        height: 20px;margin-top: 4px;
        margin-left: 2px;
        line-height: 19px;
        text-align: center;
        font-size:12px;
        font-family:微软雅黑;
    }
    /*工具项:整饰-->>对应下拉面板*/
    .mapDecorateTools{
        position:relative;
        width: 85px;
        left: 10em;
        background-color: #ffffff;
        box-shadow: 4px 4px 10px #888888;
        z-index: 4; /*高于lyrBox的3*/
    }
    /*地图整饰(坐标、比例尺、图例均通用) */
    .map-decorate {
        position: absolute;
        z-index: 2;
    }
    /*比例尺位置*/
    /*用干覆盖原生比例尺的样式*/
    .ol-scale-line {
        background: #f39c12;
        border-radius: 4px;
        bottom: 8px;
        left: -20em; /*约等于16px*20=320px*/
        padding: 2px;
        position: absolute;
        height: 26px;
    }
    .map-scalebar{
        position:absolute;
        bottom:6px;
        left :10em;
    }
    /*坐标位置*/
    .map-coordinate{
        left:315px;
        /*right:105px;*/
        bottom:15px;
        /*top:10px;*/
        margin:2px 6px;
        padding: 2px 4px;
        font-family:Arial;
        color:#ffffff;
        background-color: #f39c12;/*min-width: 150px;*/
        border-radius: 4px;
        height: 20px;/*注释*/
    }

@import '../assets/css/zdmap.css';
</style>